<template>
    <div class="container">
     <div class="top">
      <ul>
        <li><i class="iconfont icon-tubiaozhizuo-"></i></li>
        <router-link tag="li" to='/log'>登录</router-link>
        <router-link tag="li" to='/reg'>注册</router-link>
      </ul>
    </div>
    <div class="bottom">
      <div class="left">
        <ul class="left-icon">
          <li v-for="(item, index) of list" :key = "index" :class="item.icon"></li>
        </ul>
      </div>
      <div class="right">
        <mt-field   placeholder="账号"  v-model="username" :state="usernameState" ></mt-field>
        <mt-field   placeholder="密码" type="password" v-model="password" :state="passwordState" ></mt-field>
        <mt-button @click.native='login' :disabled="disabled" :type="type" size="large" id="log">登录</mt-button>
      </div>
    </div>
    <div class="icons" >
      <router-link :to="items.path" tag="div" v-for="(items, index) of list2" :key = "index" :class="items.icon2" ></router-link>
    </div>
    </div>
</template>
<script>
import { Field, Button, Indicator } from 'mint-ui'
import Vue from 'vue'
import axios from 'axios'
Vue.use(Field, Button, Indicator)
export default {
  data () {
    return {
      username: '',
      password: '',
      list: [
        {icon: 'iconfont icon-yonghu'},
        {icon: 'iconfont icon-mima1'}
      ],
      list2: [
        {
          path: '/qq',
          icon2: 'iconfont icon-QQ'
        },
        {
          path: '/weibo',
          icon2: 'iconfont icon-weibo3'
        }
      ]
    }
  },
  computed: {
    type () {
      if (this.usernameState === 'success' && this.passwordState === 'success') {
        return 'primary'
      } else {
        return 'default'
      }
    },
    disabled () {
      if (this.type === 'primary') {
        return false
      } else {
        return true
      }
    },
    usernameState () {
      if (this.username === '') {
        return ''
      }
      if (/^1[345678]\d{9}$/.test(this.username)) {
        return 'success'
      } else {
        return 'error'
      }
    },
    passwordState () {
      if (this.password === '') {
        return ''
      }
      if (/^\d{6}$/.test(this.password)) {
        return 'success'
      } else {
        return 'error'
      }
    }
  },
  methods: {
    login () {
      axios({
        method: 'post',
        url: 'http://10.8.162.3:8080/regist.do',
        data: {
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.container{
  @include flexbox();
  @include flex-direction(column);
  .top{
    @include rect(100%, 2.78rem);
    background:url("./../../assets/baby2.jpg") no-repeat 0 0;
    background-size:100% 100%;
     ul{
      @include flexbox();
      justify-content:space-between;
      li{
        @include rect(0.88rem, 0.38rem);
        color:#EF98A9;
        @include align();
        font-size: 0.20rem;
        border-radius: 0.18rem;
        overflow: hidden;
        background: rgba(231, 231, 231, 0.555);
        color: rgba(97, 70, 70, 0.479);
        img{width:1rem;height:1rem}
        &.router-link-active {
          background: rgba(247, 247, 247, 0.555);
          color: #83D8C3;
          background: rgba(255, 250, 218, 0.884);
        }
      }
      li:nth-of-type(1){
        background: none;
        margin: 0.05rem 0 0 -0.1rem;
      }
      .icon-tubiaozhizuo- {
        font-size: 0.4rem;
        color: #50B674;
      }
    }
  }
  .bottom{
    @include rect(100%, auto);
    @include background-color(#fff);
    @include flexbox();
    @include justify-content(space-between);
    .left-icon{
      @include flexbox();
      @include flex-direction(column);
      width:10%;
      margin-left: 0.1rem;
      li{
        font-size:0.26rem;
        width:100%;
        height:0.50rem;
        text-align: center;
        line-height: 0.5rem;
        //  border-bottom: 1rem solid #ccc;
      }
    }
    .right {
      width: 86%;
      .mint-cell{
        float: left;
        width:86%;
        border-bottom: 1px solid #ccc;
        .mint-cell-wrapper{
          font-size:0.20rem;
          box-sizing:border-box;
          @include rect(100%, 0.59rem);
          border:none;
          .mint-cell-title{
            width:0.50rem;
            .mint-cell-text{
              background:#f66
            }
          }
        }
      }
        .mint-cell-value{
          color: #757575;
          input{
            text-indent: 0.10rem;
            color: #757575;
          }
        }
        .mint-button{
          position:fixed;
          left: 0;
          bottom:0;
          height: 0.60rem;
          font-size: 0.24rem;
          background: #83D8C3;
        }
      }
  }
  .icons{
      margin-top:0.15rem;
      margin-left:60%;
      @include rect(100%, auto);
      line-height: 0.4rem;
      div{
        float: left;
        margin-left:0.20rem;
        font-size:0.30rem;
      }
      .icon-weixin1 {
        color: #50B674;
      }
      .icon-QQ {
        color: #68A5E1;
        font-size: 0.34rem;
      }
      .icon-weibo3 {
        color: #EA5D5C;
      }
    }
  }
</style>
